<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="js/jquery-2.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<style>
    body {
        padding-top: 50px
    }
</style>
<script>
    $(function () {
        $("#startProcess").click(function () {
            var params = {
                "userId": $("#userId").val(),
                "days": $("#days").val(),
                "reason": $("#reason").val()
            };
            $.ajax({
                url: "/vacation/start",
                type: "POST",
                data: JSON.stringify(params),
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                success: function (data) {
                    alert(data);
                }
            });
        });
        $("#search").click(function () {
            var url = "/vacation/tasks/" + $("#searchName").val();
            $.get(url, function (data) {
                $("#taskList tbody").html("");
                $.each(data, function (idx, obj) {
                    $("#taskList tbody").append(" <tr class='text-muted' style='font-size: 23px' id='" + obj.id + "'>"
                            + "<td>" + (idx + 1) + "</td>"
                            + "<td>" + obj.id + "</td>"
                            + "<td>" + obj.name + "</td>"
//                            + "<td>" + "<button id='" + obj.id + "' type='button' class='btn btn-primary'>完成任务</button>" + "</td>"
                            + "</tr>")
                });
//                $("#taskList tbody").find("button").each(function () {
//                    $(this).click(function () {
//                        var url=
//                        $.get();
//                    });
//                });
            });
        });
        $("#assigee").click(function () {
            var url = "/vacation/claim/" + $("#taskId").val() + "/" + $("#assigeeId").val();
            $.get(url, function (data) {
                alert(data);
            });
        });
        $("div button.complete").each(function () {
            $(this).click(function () {
                var url = "/vacation/complete/" + $("#completeTaskId").val() + "/" + $(this).attr("value");
                $.get(url, function (data) {
                    var user = data.user;
                    var result = data.flag ? "同意" : "拒绝";
                    $("#resultList tbody").append(" <tr class='text-muted' style='font-size: 23px'" + ">"
                            + "<td>" + user.userId + "</td>"
                            + "<td>" + user.days + "</td>"
                            + "<td>" + user.reason + "</td>"
                            + "<td>" + result + "</td>"
                            + "</tr>")
                })
            });
        });
    })
</script>
<body>
<div class="container">
    <div class="input-group">
        <span class="input-group-addon">请假天数</span>
        <input id="days" type="text" class="form-control">
    </div>
    <div class="input-group">
        <span class="input-group-addon">请假人员</span>
        <input id="userId" type="text" class="form-control">
    </div>
    <div class="input-group">
        <span class="input-group-addon">请假原因</span>
        <input id="reason" type="text" class="form-control">
    </div>
    <button id="startProcess" type="button" class="btn btn-primary">启动请假流程</button>
    <br>
    <br>
    <div class="input-group">
        <input id="searchName" type="text" class="form-control">
        <span id="search" class="btn input-group-addon">查询Ta的任务</span>
    </div>
    <table id="taskList" class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>Number</th>
            <th>TaskId</th>
            <th>ActivitiName</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <br>
    <div class="input-group" style="float:left;width: 49%">
        <span class="input-group-addon">候选人</span>
        <input id="assigeeId" type="text" class="form-control">
        </select>
    </div>
    <div class="input-group" style="float:right;width: 49%">
        <span class="input-group-addon">任务ID</span>
        <input id="taskId" type="text" class="form-control">
        </select>
    </div>
    <button id="assigee" type="button" class="btn btn-primary">申领任务</button>
    <br>
    <br>
    <div class="input-group" style="float:left;width: 49%">
        <span class="input-group-addon">任务ID</span>
        <input id="completeTaskId" type="text" class="form-control">
        </select>
    </div>
    <button id="agree" value="true" type="button" class="btn btn-primary complete">允许</button>
    <button id="refuse" value="false" type="button" class="btn btn-primary complete">拒绝</button>
    <table id="resultList" class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>userId</th>
            <th>days</th>
            <th>reason</th>
            <th>result</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</body>
</html>